<template>
  <div class="hs-st">
    <div class="hs-st-wrap">
      <div class="hs-st-title-wrap">
        <div class="hs-st-title-wrap-left"></div>
        <div class="hs-st-title-wrap-title">科创中心入驻信息统计大屏</div>
        <div class="hs-st-title-wrap-right"></div>
      </div>
      <div class="hs-st-col left-column">
        <div class="left-column-title">全局统计</div>
        <div class="left-column-block1">
          <GlobalStatistical />
        </div>
        <div class="left-column-block2">
          <EmInOutTend />
        </div>
        <div class="left-column-block3">
          <EmInOutMonth />
        </div>
      </div>
      <div class="hs-st-col center-column">
        <div class="center-column-row">
          <EnterpriseShow />
          <div class="hs-es-wrap-fix">
            <!-- <div
              class="hs-es-wrap-fix-block"
              v-for="(item, index) in this.$store.state.crowNumber"
              :key="index"
            >
              {{ item }}
            </div> -->
          </div>
        </div>
        <div class="center-column-row2">
          <div class="center-column-row2-block">
            <EmAtendinWeek />
          </div>
          <div class="center-column-row2-block">
            <EnterpriseTop5 />
          </div>
        </div>
      </div>
      <div class="hs-st-col right-column">
        <div class="right-column-title">基础信息分析</div>
        <div class="right-column-block1">
          <EmGenderDis />
        </div>
        <div class="right-column-block2">
          <EmAgeDis />
        </div>
        <div class="right-column-block3">
          <EnterpriseExtinct />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import { getNotices, getScreen, getCompanyActive, getCompanyTitle } from '@/api/permission';
import GlobalStatistical from './components/globalStatistical.vue';
import EmInOutTend from './components/emInOutTend.vue';
import EmInOutMonth from './components/emInOutMonth.vue';
import EmAtendinWeek from './components/emAttendinWeek.vue';
import EnterpriseTop5 from './components/enterpriseTop5.vue';
import EnterpriseExtinct from './components/enterpriseExtinct.vue';
import EmAgeDis from './components/emAgeDis.vue';
import EmGenderDis from './components/emGenderDis.vue';
import EnterpriseShow from './components/enterpriseShow.vue';

export default {
  name: "statistical",
  components: {
    GlobalStatistical: GlobalStatistical,
    EmInOutTend: EmInOutTend,
    EmInOutMonth: EmInOutMonth,
    EmAtendinWeek: EmAtendinWeek,
    EnterpriseTop5: EnterpriseTop5,
    EnterpriseExtinct: EnterpriseExtinct,
    EmAgeDis: EmAgeDis,
    EmGenderDis: EmGenderDis,
    EnterpriseShow: EnterpriseShow,
    // ScaleBox: ScaleBox,
  },
  data() {
    return {
      randomId: null,
      timer: null, //暂时没有用到它的地方
      pathTimer: null,
      companyTimer: null,
      reFresh: true,
    };
  },
  mounted() {
    this.eventLoop();
    this.companyTimer = setInterval(() => {
      this.getCompay();
    }, 2000);
  },
  methods: {
    ...mapMutations('statistical', {
      setStaticGlobal: "setStaticGlobal",
      setSingleEnter: "setSingleEnter",
      setEmInOutTend: "setEmInOutTend",
      setEmInOutMonth: "setEmInOutMonth",
      setEmAttendinWeek: "setEmAttendinWeek",
      setEnterpriseTop5: "setEnterpriseTop5",
      setEnterpriseExtinct: "setEnterpriseExtinct",
      setEmAgeDis: "setEmAgeDis",
      setEmGenderDis: "setEmGenderDis",
      setEmInOutMonthxAxis: "setEmInOutMonthxAxis",
      setCrowNumber: "setCrowNumber",
      setEnterpriseShow: "setEnterpriseShow",
      setEmInOutTendxAxis: "setEmInOutTendxAxis",
    }),
    eventLoop() {
      this.pathEvent();
      this.screenEvent();
    },
    pathEvent() {
      clearTimeout(this.pathTimer);
      getNotices().then((res) => {
        if (res.data.code === 1001) {
          this.setSingleEnter(res.data.list[0]);
        //   this.$router.push("/terminal");
        }
        this.pathTimer = setTimeout(() => {
          this.eventLoop();
        }, 1000);
      });
    },
    screenEvent() {
      clearTimeout(this.timer);
      getScreen().then((res) => {
        if (res.code === 1001) {
          this.setSl(res.data);
          this.setED(res.data.list_day[0]);
          this.setEH(res.data.list_month[0]);
          this.setE5(res.data.list_top5);
          this.setET(res.data.list_company_type);
          this.setAge(res.data.list_user_age);
          this.setGender(res.data.list_user_sex);
        }
      });
      getCompanyActive().then((res) => {
        if (res.code === 1001) {
          this.setEK(res.data);
        }
      });
    },
    setED(res) {
      let time = [];
      let day = [];
      let key = Object.keys(res);
      key.forEach((i) => {
        if (i.indexOf("day") > 1) {
          day.push(res[i]);
        } else {
          time.push(res[i]);
        }
      });
      this.setEmInOutTend(time);
      this.setEmInOutTendxAxis(day);
    },
    ObjectToArray(object) {
      let resList = [];
      Object.keys(object).forEach((item) => resList.push(object[item]));
      return resList;
    },
    setSl(res) {
      this.setStaticGlobal({
        workRoom: res.office,
        carPlace: res.parking,
        enterprise: res.company,
        employee: res.user,
      });
      let str = res.company + "";
      let array = str.split("");
      let len = 4 - array.length;
      let list = new Array(len).fill("0");
      array.forEach((i) => list.push(i));
      this.setCrowNumber(list);
    },
    setEH(res) {
      let yList = [];
      let xList = [];
      Object.keys(res).forEach((i) => {
        if (i.indexOf("month") === -1) {
          yList.push(res[i]);
        } else {
          xList.push(res[i]);
        }
      });
      this.setEmInOutMonth(yList);
      this.setEmInOutMonthxAxis(xList);
    },
    setEK(res) {
      this.setEmAttendinWeek([
        { value: res.data.num, name: "七日活跃出勤员工" },
        { value: res.data2.num, name: "七日非活跃出勤员工" },
      ]);
    },
    setE5(res) {
      this.setEnterpriseTop5(
        res.map((i) => {
          return { name: i.title, value: i.num };
        })
      );
    },
    setET(res) {
      function join(str, val) {
        return str + "\n" + val;
      }
      this.setEnterpriseExtinct(
        res.map((i) => {
          return { name: join(i.title, i.num), value: i.num };
        })
      );
    },
    setAge(res) {
      let defaultArray = [1, 1, 1, 1, 1];
      res.forEach((i) => {
        defaultArray[i.age_type - 1] = i;
      });

      for (let i = 0; i < defaultArray.length; i++) {
        if (defaultArray[i] === 1) {
          defaultArray[i] = {
            type_age: i + 1,
            num: 0,
            rate: "0.00",
          };
        }
      }
      this.setEmAgeDis(defaultArray.map((i) => i.num));
    },
    setGender(res) {
      this.setEmGenderDis({
        male: res[0].rate,
        female: res[1].rate,
      });
    },
    getCompay() {
      let count = 0;
      function calc(num) {
        if (num === 0) return "16";
        if (num < parseInt(count / 2)) return "16";
        return parseInt((num / count) * 70) + "";
      }
      getCompanyTitle().then((res) => {
        if (res.code === 1001) {
          let array = res.data;
          let resList = [];
          array.forEach((i) => (count += parseInt(i.count)));
          array.forEach((i) => {
            // resList.push({
            //   label: i.title,
            //   url: "",
            //   target: "_top",
            //   fontSize: calc(i.count),
            //   tooltip: i.count,
            // });
            resList.push({
              name: i.title,
              value: i.count,
            });
          });
          this.setEnterpriseShow(resList);
          // this.reFresh = true; //组件刷新，显示文字动效
        }
      });
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    clearTimeout(this.pathTimer);
    clearTimeout(this.companyTimer);
    this.timer = null;
    this.pathTimer = null;
    this.companyTimer = null;
  },
};
</script>


<style scoped>
.hs-st {
  /* border: 4px solid green; */
  height: 100vh;
  background-color: rgba(6, 11, 43, 1);
  color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1200px;
}
.hs-st-wrap {
  flex: 1;
  /* border: 1px solid rgb(211, 243, 29); */
  background-image: url("../../assets/image/background.png");
  background-size: 99% 96%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  display: flex;
  position: relative;
}
.hs-st-title-wrap {
  position: absolute;
  /* border: 1px solid red; */
  width: 38%;
  top: 1.4rem;
  left: 50%;
  height: 4%;
  transform: translate(-50%, 0);
  color: #9be5fb;
  font-weight: bolder;
  display: flex;
  justify-content: space-around;
}
.hs-st-title-wrap-left {
  width: 26%;
  /* border: 1px solid yellow; */
  background-image: url("../../assets/image/title-right.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.hs-st-title-wrap-title {
  /* border: 1px solid red; */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

@media only screen and (max-width: 1380px) {
  .hs-st-title-wrap-title {
    font-size: 1.1rem;
  }
}

.hs-st-title-wrap-right {
  width: 26%;
  /* border: 1px solid yellow; */
  background-image: url("../../assets/image/title-left.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.hs-st-col {
  flex: 1;
  /* border: 2px solid red; */
}
.left-column {
  /* background-color: red; */
  margin: 50px 4px 36px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.left-column-title {
  /* border: 1px solid green; */
  line-height: 42px;
  color: #6fe6f9;
  font-size: 20px;
  background: linear-gradient(to right, #274b6d, #1a3656, transparent);
}
.left-column-block1 {
  /* border: 1px solid green; */
  margin-top: 4px;
  flex: 1;
}
.left-column-block2 {
  flex: 1;
  /* border: 1px solid green; */
  background-image: url("../../assets/image/background4.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 4px;
}
.left-column-block3 {
  flex: 1;
  /* border: 1px solid green; */
  background-image: url("../../assets/image/background3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 4px;
}
.center-column {
  flex: 1.5;
  /* background-color: hotpink; */
  margin: 100px 4px 36px 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.center-column-row {
  /* border: 1px solid white; */
  background-image: url("../../assets/image/background2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position-x: center;
  position: relative;
  flex: 1.5;
}
.hs-es-wrap-fix {
  /* background-color: red; */
  width: 50%;
  height: 12%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 20%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hs-es-wrap-fix-block {
  /* border: 1px solid white; */
  border-radius: 2px;
  width: 17%;
  background: linear-gradient(to top right, #2b72b5, #67cff7);
  text-align: center;
  font-size: 38px;
  font-weight: bolder;
}
.center-column-row2 {
  flex: 1;
  margin-top: 2rem;
  /* border: 1px solid black; */
  /* background-color: yellow; */
  display: flex;
  justify-content: space-between;
}
.center-column-row2-block {
  /* background-color: #274b6d; */
  width: 49.6%;
  background-image: url("../../assets/image/background5.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.right-column {
  /* background-color: green; */
  margin: 50px 56px 36px 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.right-column-title {
  /* border: 1px solid green; */
  line-height: 42px;
  font-size: 20px;
  padding-left: 16px;
  margin-left: 34px;
  color: #6fe6f9;
  background: linear-gradient(to right, transparent, #1a3656, #274b6d);
}
.right-column-block1 {
  flex: 1;
  /* border: 1px solid green; */
  background-image: url("../../assets/image/background3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 4px;
}
.right-column-block2 {
  flex: 1;
  /* border: 1px solid green; */
  background-image: url("../../assets/image/background3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 4px;
}
.right-column-block3 {
  flex: 1;
  /* border: 1px solid green; */
  background-image: url("../../assets/image/background3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 4px;
}
</style>